<template>
    <div class="nav">
        <ul>
            <li v-for="item in label" :key="item.icon">
                <router-link class="nav-item" :to="item.route">
                    <Icon :type="item.icon" size="20" />
                    <span>{{item.name}}</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>

export default {
    name: 'Navigation',
    data() {
        return {
            theme2: 'light',
            label: [
                { icon: 'logo-apple', name: '动态样式', route: '/dynamic-style' },
                { icon: 'md-compass', name: 'Vuex', route: '/mind-vuex' },
                { icon: 'ios-book', name: '流光按钮', route: '/pretty-button' },
                { icon: 'ios-construct', name: 'selectDemo', route: '/select-box' },
                { icon: 'ios-analytics', name: 'iview表单Demo', route: '/form-demo' },
                { icon: 'ios-cog-outline', name: 'computed计算属性', route: '/computed-demo' },
                { icon: 'ios-fastforward', name: '滚动条', route: '/seamless-scroll' },
                { icon: 'md-globe', name: '地图', route: '/amap' },
                { icon: 'md-swap', name: '网络请求axios', route: '/axios' },
                { icon: 'md-aperture', name: '动态表格', route: '/dynamic-table' },
                { icon: 'md-grid', name: '动态表格2', route: '/dynamic-table2' },
                { icon: 'md-analytics', name: '动态表格3', route: '/dynamic-table3' },
                { icon: 'ios-create', name: '富文本', route: '/editor' },
                { icon: 'md-git-compare', name: '流程设计器', route: '/bpmn' },
                { icon: 'md-git-network', name: 'AntV-X6', route: '/antv-x6' },
            ]
        }
    }
}
</script>
<style lang="less" scoped>
.nav {
    li {
        height: 50px;
        a {
            padding: 13px 16px;
            min-height: 50px;
            width: 87%;
            position: relative;
            display: flex;
            color: transparent;
            align-items: center;
            &.active {
                background: #2ba245;
                border-left-color: #2ba245;
                span,
                i {
                    color: #fff;
                }
            }
            i {
                margin-right: 10px;
                color: #4d4d4d;
            }
            span {
                color: #4d4d4d;
            }

            &:hover {
                background: #54b96a;
                border-left-color: #54b96a;
                span,
                i {
                    color: #fff;
                }
            }
            &:after {
                left: 100%;
                top: 0;
                content: "";
                position: absolute;
                border: solid transparent;
                border-left-color: inherit;
                border-width: 25px 0 25px 20px;
            }
        }
    }
}
</style>